<div class="x-nav">
  <span class="layui-breadcrumb">
    <a>房屋管理</a>
    <a><cite>到账账单</cite></a>
  </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()"
    title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
  </a>
</div>
<div class="layui-row layui-col-space15">
  <div class="layui-col-md12">
    <div class="layui-card">
      <div class="layui-card-body ">
        <form class="layui-form layui-col-space5" lay-filter="formData">
          <div class="layui-inline layui-show-xs-block">
            <select name="property" lay-filter="select">
              {foreach $properties as $v}
              <option value="{$v.id}" {if $house_property_id==$v.id}selected{/if}>{$v.name}</option>
              {/foreach}
            </select>
          </div>
          <div class="layui-inline layui-show-xs-block">
            <select name="house_number_id" id="house_number_id" autocomplete="off">
              <option value="">请选择房号</option>
              {foreach $number as $v}
              <option value="{$v.id}">{$v.name}</option>
              {/foreach}
            </select>
          </div>
          <div class=" layui-inline layui-show-xs-block">
            <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
          </div>
        </form>
        <table class="layui-table" id="dataGrid" lay-filter="grid"></table>
      </div>
    </div>
  </div>
</div>

<script type="text/html" id="toolbarDemo">
  <a class = "btn-sum">今日到账总金额：{$sum}</a>
</script>

<script>
 var sum = {$sum};
  layui.use(['table', 'form', 'laydate'], function () {
    var table = layui.table
      , laydate = layui.laydate
      , form = layui.form;

    // 首次加载
    table.render({
      elem: '#dataGrid'
      , height: 'full'
      , url: './query.html' //数据接口
      , toolbar: '#toolbarDemo'
      , defaultToolbar: ['filter']
      , page: true //开启分页
      , cols: [[ //表头
        { field: 'property_name', title: '房产', minWidth: 110 }
        , { field: 'number_name', title: '房号' }
        , { field: 'lease', title: '租期', minWidth: 170 }
        , { field: 'electricity_meter_this_month', title: '电表度数', hide: true }
        , { field: 'electricity_consumption', title: '用电量', hide: true }
        , { field: 'electricity', title: '电费', hide: true }
        , { field: 'water_meter_this_month', title: '水表度数', hide: true }
        , { field: 'water_consumption', title: '用水量', hide: true }
        , { field: 'water', title: '水费', hide: true }
        , { field: 'rental', title: '租金', hide: true }
        , { field: 'deposit', title: '押金', hide: true }
        , { field: 'garbage_fee', title: '垃圾费', hide: true }
        , { field: 'other_charges', title: '其他费用', hide: true }
        , { field: 'total_money', title: '总金额' }
        , { field: 'note', title: '备注' }
        , { field: 'accounting_date', title: '到账日期', minWidth: 110 }
      ]]
    });

    form.on('submit(sreach)', function (data) {
      var data = data.field;
      table.reload('dataGrid', {
        url: './query.html'
        , where: {
          "house_property_id": data.property,
          "house_number_id": data.house_number_id
        }
        , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
          curr: 1 //设定初始在第 5 页
        }
      }); //只重载数据
      $('.btn-sum').text('今日到账总金额：' + sum);
      return false;
    });

    // 房产房号 下拉联动
    form.on('select(select)', function (data) {
      var house_property_id = data.value;
      $.ajax({
        type: 'GET',
        url: "{:url('House.number/queryNumberId')}",
        data: { house_property_id: house_property_id },
        dataType: 'json',
        success: function (e) {
          //empty() 方法从被选元素移除所有内容
          $("select[name='house_number_id']").empty();
          var html = "<option value=''>请选择房号</option>";;
          $(e.data).each(function (v, k) {
            html += "<option value='" + k.id + "'>" + k.name + "</option>";
          });
          //把遍历的数据放到select表里面
          $("select[name='house_number_id']").append(html);
          // //从新刷新了一下下拉框
          form.render('select');      //重新渲染
        }
      });
      $.ajax({
        type: 'GET',
        url: "{:url('sum')}",
        data: { house_property_id: house_property_id },
        dataType: 'json',
        success: function (data) {
          sum = data;
          $('.btn-sum').text('今日到账总金额：' + sum);
        }
      });
    });
  });

</script>